<!DOCTYPE html>
<html>
<head>
	<title>vue</title>
	<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script src="vue.js"></script>
<script type="text/javascript" src="axios.min.js"></script>
<script type="text/javascript" src="lodash.js"></script>

</head>
<body>

	<div id="app" class="container">
		<input type="text" v-model="additem" placeholder="press enter to add item">

		<ol>
			<li v-for="item in items" v-bind:key="item.id">
				{{item.text}}
			</li>
		</ol>
	</div>

	<script type="text/javascript">
		var app=new Vue({
			el:'#app'
			,data: {
				items:[
					{id:'1',text:'footer'}
					,{id:'2',text:'bar'}
				]	
			},
			methods:{
				additem: function(){
					this.items.push({id:'3',text:'hhah'})
				}
			}
		});
	</script>

</body>
</html>